﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-2.0.3.js"></script>
</head>
<body>


    <div>
        <p>
            <input type="text" />
        </p>
        <div class="clr">
            <input type="checkbox" name="readme" id="readme" />
            <p>Hello World</p>
        </div>
    </div>



    <input type="text" value="123" id="myInput" />


    <table>
        <tbody>
            <tr id="myTr">
                <td>prev</td>
                <td id="td1">1</td>
                <td>2</td>
                <!--123-->
            </tr>
            <tr>
                <td>next</td>
                <td id="td3">3</td>
                <td>4</td>
            </tr>
        </tbody>

    </table>


    <h2>Greetings</h2>
    <div class="container">
        <div class="inner">Hello</div>
        <div class="inner">Goodbye</div>
    </div>

    <span>Span Text</span>
    <strong>What about me?</strong>
    <span>Another One</span>



    <div class="container">
        <div class="inner first">Hello</div>
        <h2>New heading</h2>
        <div class="inner third">Goodbye</div>
    </div>

    <script type="text/javascript">
        $(function () {
            var target = $("#td1 , #td3")

            //向上找
            var a = target.parent();
            a = target.parents();
            a = target.parentsUntil($("tbody"));

            //向前找
            a = target.prev();
            a = target.prevAll();
            a = target.prevUntil();

            //向后找
            a = target.next();
            a = target.nextAll();
            a = target.nextUntil();

            target = $("#myTr")

            a = target.siblings();              //不包括自己
            a = target.children();              //不包括文本节点和注释节点
            a = target.contents();              //包括文本节点和注释节点

        })


    </script>
</body>
</html>
